<template>
  <div class="head">
    <div class="head_in">
      <div class="head_left">
        <span class="home_span" title="面授课程-硅谷甄选" @click="goHome">面授课程-硅谷甄选</span>
        <a href="/haha">在线课堂</a>
        <a href="/aa" style="margin-left: 30px">大厂学源</a>
      </div>


      <div class="head_right">
        010-88883333
       <span style="margin-left: 20px;position: relative">
          <a  class="link" @click="handleLogin">登陆</a>
          <a  class="link"  @click="handleRegister">注册</a>
          <a @click="()=>{this.userInfoIsShow=true}">
            <i class="el-icon-user"  ><span>个人信息</span></i>
             <UserInfo v-if="userInfoIsShow" @close="onCloseUserInfo"/>
          </a>

       </span>
      </div>
    </div>
  </div>
</template>

<script>
import UserInfo from "~/components/UserInfo";
export default {
  name:"Head",
  components: {
    UserInfo
  },

  data(){
    return {
      userInfoIsShow:false
    }
  },
  methods:{
    handleLogin(){
      this.$router.push('/user/login')
    },
    handleRegister(){
      this.$router.push('/user/register')
    },
    goHome(){
      location.href='/'
    },
    onCloseUserInfo(){
      this.userInfoIsShow=false
    }

  }
}
</script>

<style scoped>
.head{
  height: 36px;
  line-height: 36px;
  background-color: #F5F7FA;
  font-size: 12px;
  left: 0;
  right: 0;
  z-index: 999999;
}

.head_in{
  height: 36px;
  line-height: 36px;
  width: 1200px;
  margin: 0 auto;
}

.head_left{
  display: inline-block;
  height: 36px;
  line-height: 36px;
}

.head_left span{
  padding: 0 10px;
  background-color: #00cc99;
  color: #fff;
  margin-right: 28px;
  display: inline-block;
  height: 36px;
}

.head_left a:hover {
  color: #00cc99;
}

.head_left a {
  color: rgba(39, 40, 72, 0.8);
}
.head_right{
  float: right;
  line-height: 36px;
  padding-left: 35px;
  background: url('/images/headphone.png')left center no-repeat;
  color: rgba(39, 40, 72, 0.8);
  font-size: 14px;
}

.head_right .link{
  color: rgba(39, 40, 72, 0.8);
  font-size: 12px;
  height: 100%;
}

.head_in .link:hover{
  color: gray;
}

.head_left .home_span:hover{
  cursor: pointer;
}

.head-right {

}


</style>
